<template>
  <div class="main">
    <div class="img img1">
      <div class="box">the th1</div>
    </div>
    <div class="img img2">
      <div class="box">the th2</div>
    </div>
    <div class="img img3">
      <div class="box">the th3</div>
    </div>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    const infoImgList = reactive([
      {
        img: require("@/assets/images/BMW_GZAS.jpg"),
        title: "1",
        content: "1",
      },
    ]);
    return {
      infoImgList,
    };
  },
};
</script>

<style scoped>
/* 视差滚动 */
.img {
  width: 100%;
  height: 100vh;
  color: brown;
  font-size: 28px;
  font-weight: bold;
  background-attachment: fixed;
  background-size: cover;
  position: relative;
}
.box{
    position: absolute;
    left: 7.2vw;
    bottom: 9.2vw;
}
.img1 {
  background-image: url("../assets/images/BMW_GZAS.jpg");
  background-position: center;
}
.img2 {
  background-image: url("../assets/login_bg.jpg");
  background-position: center;
}
.img3 {
  background-image: url("../assets/images/BMW_GZAS.jpg");
  background-position: center;
}
</style>